import { ref, reactive } from "vue"
import Child from "./Child.jsx"
export default {
    name: "Father",
    setup() {
        const state = reactive({
            highlightRowKey: "",
        })
        let a = ref(1)
        let b = ref(2)
        let c = ref(3)
        let d = ref(4)

        function updateA(value) {
            a.value += value
        }
        function 改state() {
            state.highlightRowKey += "amtf"
        }

        return () => (
            <div class="father">
                <h6>父组件</h6>
                <QBtn color="primary" icon="check" label="改state" onClick={改state} />
                <span>a：{a.value}</span>
                <span>b：{b.value}</span>
                <span>c：{c.value}</span>
                <span>d：{d.value}</span>
                <span>state.highlightRowKey：{state.highlightRowKey}</span>
                <Child
                    a={a.value}
                    b={b.value}
                    c={c.value}
                    d={d.value}
                    {...{ x: 100, y: 200 }}
                    updateA={updateA}
                    highlightRowKey={state.highlightRowKey}
                />
            </div>
        )
    },
}
